﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Right.Photo.ascx.cs" Inherits="Controls_Right_Photo" %>
<div class="box3" style="position: relative;">
    <div class="title_top">
        <a href="/news/tin-anh/52-0/index.html">TIN ẢNH</a>
    </div>
    <div id="imgLink" style="height:192px;">
        <a href="" runat="server" id="hlTopImg">
            <asp:Image ID="imgTop" ImageUrl="/resources/images/anh.jpg" Width="256" runat="server"  height="192" /></a>
    </div>
    <div class="txt_top" id="descPhoto">
        <a runat="server" id="hlTop" href="javascript:void();"></a>
    </div>
    <div class="con_ul">
        <asp:Repeater runat="server" ID="rptPhoto">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li id="id_<%# Container.ItemIndex %>" title="<%#Eval("Title") %>" onclick="javascript:changeImg(this); " class="item"
                    rel="<%# AppUtils.ImageUrl(Eval("ImageUrl").ToString(), "256","192")%>" rev="<%#Eval("Url") %>"
                    alt="<%#Eval("Title")%>"><a target="_blank" href="#" onclick="return false;"></a>
                </li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:Repeater>
    </div>
</div>
<script language="javascript" type="text/javascript">
    var slideIndex = 0;
    var inteval;
    $(document).ready(function () {
        $("#id_0").addClass("active");
        inteval = setInterval("changePhoto()", 5000);

    });
    function changePhoto() {
        slideIndex++;
        if (slideIndex == 5)
            slideIndex = 0;

        $(".con_ul ul li.item").removeClass("active");
        $("#id_" + slideIndex).addClass("active");
        $("#imgLink").html('<a href="' + $("#id_" + slideIndex).attr("rev") + '"><img src="' + $("#id_" + slideIndex).attr("rel") + '" width="256" height="192" style="border:0px;" /></a>');
        $("#descPhoto").html('<a href="' + $("#id_" + slideIndex).attr("rev") + '">' + $("#id_" + slideIndex).attr("title") + '</a>');
    }
    function changeImg(e) {
        clearInterval(inteval);
        $(".con_ul ul li.item").removeClass("active");
        $(e).addClass("active");
        $("#imgLink").html('<a href="' + $(e).attr("rev") + '"><img src="' + $(e).attr("rel") + '" width="256" height="192" /></a>');
        $("#descPhoto").html('<a href="' + $(e).attr("rev") + '">' + $(e).attr("title") + '</a>');
    }
</script>
